<template>
  <view class="goods-list clearfix">
    <u-checkbox-group>
      <view
        v-for="(item, index) in productList"
        :key="index"
        class="flex-item"
        :style="'height:'+itemHeight+'rpx;'"
        @click="viewProductDetailFn(item)"
      >
        <u-checkbox
          v-if="checkboxShow"
          :custom-style="{position: 'absolute', left: '16rpx', top: '16rpx'}"
          size="16"
          active-color="#FF5533"
          :name="item.name"
        />
        <image class="pic" :src="item.productmap.images[0].imgUrl">
          <view class="name uni-ellipsis-2">
            <mp-html :content="item.productmap.sku_name" />
          </view>
          <view class="price"><text class="price-header">￥</text>{{ item.productmap.sale_price }}</view>
          <view class="frequently-purchased-info">已购买{{ item.buyyer_times }}次</view>
          <view v-if="proLabelShow" class="pro">
            <!--
              item.skuList[0].stock==1 -> 现货
              item.skuList[0].stock!=1-> 订货
              item.skuList[0].productTag==10 -> 协议商品(签约客户展示的标签，小程序无需展示)
              item.skuList[0].activityType==10 -> 特价
              item.skuList[0].activityType==20 -> 满减
           -->
            <text v-if="item.productmap.activityType==10" class="pro-img t-icon t-icon-tejia_tongyong_1" />
            <text v-if="item.productmap.activityType==20" class="pro-img t-icon t-icon-cuxiao_tongyong_1" />
          </view>
          <view v-if="specsShow" class="specs"><text>{{ item.skuNum }}</text>个规格</view>
        </image></view>
    </u-checkbox-group>
  </view>
</template>

<script>
export default {
  options: { styleIsolation: 'shared' }, //解决/deep/不生效**
  name: 'Index',
  props: {
    spuList: {
      type: Array,
      default: () => {
        return []
      }
    },
    editStatus: {
      type: Boolean,
      default: false
    },
    proLabelShow: {
      type: Boolean,
      default: true
    },
    specsShow: {
      type: Boolean,
      default: true
    },
    itemHeight: {
      type: Number,
      default: 564
    },
    checkAll: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    productList() {
      return this.spuList
    },
    checkboxShow() {
      return this.editStatus
    },
    isCheckAll() {
      return this.checkAll
    }
  },
  methods: {
    viewProductDetailFn(res) {
      const {
        sku_code,
        spu_code,
      } = res
      uni.navigateTo({
        url: `/shopDetail/index?spuCode=${spu_code}&skuCode=${sku_code}`
      });
    },
  }
}
</script>

<style lang="scss" scoped>
/*商品列表*/
.goods-list{
  padding:0 23rpx 0;
  .flex-item{
    position: relative;
    float: left;
    width:calc(50% - 66rpx);
    height: 564rpx;
    margin:16rpx 9rpx 0;
    background:$uni-bg-color;
    padding:0 24rpx;
    border-radius: 8rpx;
    overflow: hidden;
    .close-icon{
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      top: 10rpx;
      right: 10rpx;
    }
    .pic{
      width: 334rpx;
      height: 334rpx;
      overflow: hidden;
      margin: 0 -24rpx;
    }
    .name{
      height: 72rpx;
      line-height: 36rpx;
      font-size: $uni-font-size-base;
      overflow: hidden;
    }
    .price{
      color: $uni-orange;
      font-size: $uni-font-size-lg;
      padding:6rpx 0 8rpx;
      font-weight: bold;
      .price-header{
        font-size: $uni-font-size-sm;
      }
    }
    .frequently-purchased-info{
      color: $uni-text-color-tips;
    }
    .pro{
      height: 32rpx;
      .pro-img{
        width: 56rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
    .specs{
      color: #aaa;
      padding-top: 16rpx;
    }
  }
}
/deep/.u-checkbox-group--row{
  display: block!important;
  flex-direction: unset!important;
}
</style>
